
import React from 'react';
import { Layout,  theme } from 'antd';
import Headers from '../Headers';
import Menus from '../Menus';

const {  Content, Sider } = Layout;

type PropsType = {
    children:React.ReactNode
}
const Layouts:React.FC<PropsType> = ({children}) =>{
  const {
    token: { colorBgContainer },
  } = theme.useToken();

  return (
    <Layout>
      <Headers></Headers>
      <Layout>
        <Sider width={200} style={{ background: colorBgContainer }}>
          <Menus></Menus>
        </Sider>
        <Layout style={{ padding: ' 24px' }}>
          <Content
            style={{
              padding: 0,
              margin: 0,
              minHeight:600,
              minWidth:900,
              overflow:"auto",
              background: colorBgContainer,
            }}
            className='contents_box'
          >
            {children}
          </Content>
        </Layout>
      </Layout>
    </Layout>
  );
};

export default Layouts;